@import './color';
$px: 100vw / 1600;
$nav-height: 25 * $px;
main {
	position: absolute;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
}

canvas,
.locate-frame {
	position: absolute;
	top: 2%;
	bottom: 0;
	left: 0;
	right: 8%;
	margin: auto;
}

.alert-window {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	background-color: lighten($color: #282c34, $amount: 2%);
	border-radius: 10 * $px;
	color: #fff;
	overflow: hidden;
	.bottom {
		position: absolute;
		bottom: 18 * $px;
		display: flex;
		justify-content: space-evenly;
		width: 100%;
		color: #fff;
		div {
			height: 100%;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: #{10 * $px} / #{15 * $px};
			transition: background-color 0.3s;
			&:hover {
				background-color: lighten($color: #282c34, $amount: 5%);
			}
		}
	}
}
.interaction {
	@extend .alert-window;
	width: 800 * $px;
	height: 500 * $px;
	transition: width 0.3s;
	border: 4 * $px solid #61dafb;
	.top-bar {
		position: relative;
		width: 100%;
		height: 30 * $px;
		border-bottom: 2px solid #fff;
		.close {
			position: absolute;
			right: 0;
			width: 6%;
			height: 100%;
			transition: background-color 0.3s;
			border-top-right-radius: 5 * $px;
			text-align: center;
			line-height: 30 * $px;
			&:hover {
				background-color: red;
			}
		}
	}
	.bottom {
		height: 48 * $px;
		div {
			width: 16%;
			border: 3 * $px solid #61dafb;
		}
	}
}
.warning {
	@extend .alert-window;
	width: 400 * $px;
	height: 250 * $px;
	border: 4 * $px solid darken($win8-amber, 10%);
	.warning-content {
		width: 80%;
		height: 200 * $px;
		margin: 20 * $px auto;
		font-size: 25 * $px;
	}
	.bottom {
		height: 40 * $px;
		div {
			width: 25%;
			border: 3 * $px solid darken($win8-amber, 10%);
		}
	}
}

.func-settings,
.graph-settings {
	width: 100%;
	height: (500 - 48) * $px;
	overflow: hidden;
	font-size: 20 * $px;
	input {
		background-color: inherit;
		border: 2px dashed #fff;
		color: #fff;
	}
	.basic-params {
		position: relative;
		width: 100%;
		height: 50 * $px;
		box-sizing: border-box;
		overflow: hidden;
		display: flex;
		align-items: center;
		flex-shrink: 0;
		flex-basis: 0;
		padding: 0 10 * $px;
		div {
			height: 100%;
		}
		.right {
			position: absolute;
			right: 15 * $px;
			display: flex;
			align-items: center;
		}
		#name {
			margin-left: 10 * $px;
			width: 200 * $px;
			height: 75%;
			box-sizing: border-box;
			background-color: inherit;
			border: 2px dashed #fff;
			padding: 0 5 * $px;
			font-size: 18 * $px;
		}
		input[type='color'] {
			width: 30 * $px;
			height: 30 * $px;
			margin-right: 10 * $px;
			padding: 0;
		}
		input[type='number'] {
			box-sizing: border-box;
			font-size: 18 * $px;
			padding-left: 5 * $px;
			width: 50 * $px;
			height: 30 * $px;
		}
	}
	.main-input {
		margin-left: 25 * $px;
		margin-top: 30 * $px;
		input {
			box-sizing: border-box;
			font-size: 18 * $px;
			padding-left: 5 * $px;
			color: #fff;
			width: 60 * $px;
			height: 30 * $px;
			margin: 0 10 * $px;
		}
		.long {
			width: 180 * $px;
		}
	}
}
.right-side-tool {
	position: fixed;
	z-index: 1;
	top: 0;
	right: 0;
	width: 200 * $px;
	height: 100vh;
	display: flex;
	flex-direction: column;
	background-color: lighten($color: #282c34, $amount: 8%);
	padding-top: 25 * $px;
	.take-color-field {
		width: 200 * $px;
		height: 200 * $px;
		background-color: grey;
		input {
			width: 200 * $px;
			height: 200 * $px;
			border: none;
			outline: none;
		}
	}
	.change-width-field {
		width: 100%;
		height: 30 * $px;
		background-color: rgb(82, 82, 82);
	}
	.painting-obj-field {
		flex-grow: 1;
		width: 100%;
		border-top: 5px double #fff;
		.painting-obj {
			color: #fff;
			line-height: 45 * $px;
			width: 100%;
			height: 45 * $px;
			background-color: lighten($color: #282c34, $amount: 6%);
			align-items: center;
			display: flex;
			justify-content: space-between;
			div {
				display: flex;
				align-items: center;
			}
			.colorSquare {
				width: 27 * $px;
				height: 27 * $px;
				border-radius: 25%;
				margin: 0 5 * $px;
				cursor: pointer;
				&:before {
					margin-left: 5 * $px;
				}
			}
			.text {
				display: block;
				width: 15 * 7 * $px;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
			.edit {
				margin-right: 7 * $px;
				font-size: 20 * $px;
				cursor: pointer;
			}
		}
	}
}
.left-side-tool {
	position: fixed;
	z-index: 1;
	top: 0;
	left: 0;
	width: 40 * $px;
	height: 100vh;
	background-color: lighten($color: #282c34, $amount: 6%);
	padding-top: 35 * $px;
	div {
		width: 40 * $px;
		height: 40 * $px;
		// background-color: #61dafb;
		color: #fff;
		text-align: center;
		line-height: 40 * $px;
		margin-top: 5 * $px;
		font-size: 25 * $px;
		&:hover {
			color: #61dafb;
		}
	}
	.selected {
		color: #61dafb;
	}
}
#alert {
	z-index: 9999;
}
.point {
	position: fixed;
	width: 12 * $px;
	height: 12 * $px;
	background-color: rgba($color: #fff, $alpha: 0.8);
	border-radius: 100 * $px;
	box-shadow: 0 0 2 * $px 5 * $px rgba($color: #fff, $alpha: 0.4);
	transition: transform 0.3s;
	transform: scale(0) translate(-50%, -50%);
	z-index: 999;
	&-info {
		// width: 75 * $px;
		width: max-content;
		padding: 0 5 * $px;
		height: 40 * $px;
		background-color: rgba($color: #000, $alpha: 0.3);
		color: #fff;
		line-height: 40 * $px;
		text-align: center;
		border-radius: 10 * $px;
		font-size: 20 * $px;
		position: relative;
		top: -45 * $px;
		left: 23 * $px;
	}
}
.show {
	transform: scale(1) translate(-50%, -50%);
	transition: left 0.3s, top 0.3s;
}
